<template>
  <div class="popup-operate">
    <div id="save-feature" class="section">
      <div
        class="save-feature"
        v-for="item in saveFeature"
        :key="item.name"
        @click="clickItemFn(item)"
        @mouseenter="mouseEnterItem(item)"
        @mouseleave="mouseLeaveItem(item)"
      >
        <div class="icon">
          <div
            class="active"
            v-if="hoverItem && hoverItem.name == item.name"
            style="margin-top: 8px"
          >
            <img
              style="height: 30px !important"
              :src="item.activeIcon"
              alt=""
            />
          </div>
          <div class="normal" v-else style="margin-top: 8px">
            <img
              style="height: 30px !important"
              :src="item.normalIcon"
              alt=""
            />
          </div>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div id="capture-feature">
      <div
        id="capture-selected"
        class="capture-feature"
        v-for="item in captureFeature"
        :key="item.name"
        @mouseenter="mouseEnterItem(item)"
        @mouseleave="mouseLeaveItem(item)"
        @click="clickItemFn(item)"
      >
        <div class="icon">
          <div class="active" v-if="hoverItem && hoverItem.name == item.name">
            <img
              style="height: 24px !important"
              :src="item.activeIcon"
              alt=""
            />
          </div>
          <div class="normal" v-else>
            <img
              style="height: 24px !important"
              :src="item.normalIcon"
              alt=""
            />
          </div>
        </div>
        <div class="capture-name">
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 开关区域 -->
    <div class="drag-content">
      <div class="drag-item">
        <div class="switch">
          <el-switch
            v-model="dragConfig.isDisabledPage"
            active-color="#dee1e6"
            :width="32"
            inactive-color="#00A289"
            @change="setDragConfigIsPage($event)"
          ></el-switch>
        </div>
        <div class="label">在页面禁用拖拽功能</div>
      </div>

      <div class="drag-item">
        <div class="switch">
          <el-switch
            v-model="dragConfig.isDisabledDomain"
            active-color="#dee1e6"
            :width="32"
            inactive-color="#00A289"
            @change="setDragConfigIsDomain($event)"
          ></el-switch>
        </div>
        <div class="label">在此域名禁用拖拽功能</div>
      </div>
    </div>
  </div>
</template>

<script>
import image1 from "@/assets/icons/save-page-active.svg";
import image2 from "@/assets/icons/save-page.svg";
import image3 from "@/assets/icons/save_images-active.svg";
import image4 from "@/assets/icons/save_images.svg";
import image5 from "@/assets/icons/capture_select.svg";
import image6 from "@/assets/icons/capture_select-active.svg";
import image7 from "@/assets/icons/capture_visible-active.svg";
import image8 from "@/assets/icons/capture_visible.svg";
import image9 from "@/assets/icons/capture_page-active.svg";
import image10 from "@/assets/icons/capture_page.svg";
import image11 from "@/assets/icons/record-active.svg";
import image12 from "@/assets/icons/record.svg";
import { sendMessageToContent } from "@/entry/popup/tools";

export default {
  name: "PopupOperate",
  data() {
    return {
      saveFeature: [],
      captureFeature: [],
      hoverItem: null,
      clickItem: null,
      // 因为el-switch 的显示和实际的值相反，需要取反
      dragConfig: {
        isDisabledPage: false,
        isDisabledDomain: false
      },
      value: false
    };
  },
  comments: {},
  methods: {
    async initData() {
      this.saveFeature = [
        {
          name: "保存网址",
          activeIcon: image1,
          normalIcon: image2,
          id: "save-url-shortcut"
        },
        {
          name: "批量采集",
          activeIcon: image3,
          normalIcon: image4,
          id: "batch-save-shortcut"
        }
      ];

      this.captureFeature = [
        {
          name: "选择区域截图",
          activeIcon: image6,
          normalIcon: image5,
          id: "capture-area-shortcut"
        },
        {
          name: "可视区域截图",
          activeIcon: image7,
          normalIcon: image8,
          id: "capture-visible-shortcut"
        },
        {
          name: "整页区域截图",
          activeIcon: image9,
          normalIcon: image10,
          id: "capture-entire-shortcut"
        },
        {
          name: "开始录屏",
          activeIcon: image11,
          normalIcon: image12,
          id: "start-record-screen"
        }
      ];

      const dragConfig = await sendMessageToContent("getDragConfig");
      console.log(dragConfig);
      this.dragConfig.isDisabledPage = !dragConfig.isPage;
      this.dragConfig.isDisabledDomain = !dragConfig.isDomain;
    },
    async setDragConfigIsPage(newValue) {
      await sendMessageToContent("setDragConfigIsPage",  !newValue);
    },
    async setDragConfigIsDomain(newValue) {
      await sendMessageToContent("setDragConfigIsDomain",  !newValue);
    },
    clickItemFn(item) {
      this.clickItem = item;
      console.log(item);
      this.handleDistribution(item.id);
    },
    handleDistribution(item) {
      switch (item) {
        case "batch-save-shortcut":
          sendMessageToContent("content-batch-save-shortcut");

          break;
        case "capture-area-shortcut":
          // this.captureEntireShortcut()
          console.log("处理选择区域截图功能");
          sendMessageToContent("content-capture-area-shortcut");

          break;
        case "capture-visible-shortcut":
          console.log("处理可视区域功能");
          sendMessageToContent("content-capture-visible-shortcut");

          break;
        case "capture-entire-shortcut":
          console.log("处理整页截图功能");
          sendMessageToContent("content-capture-entire-shortcut");

          break;
        case "save-url-shortcut":
          console.log("处理保存网址方法");
          // this.saveUrlShortcut()
          sendMessageToContent("content-save-url-shortcut");
          break;
        case "start-record-screen":
          console.log("处理录屏功能");
          sendMessageToContent("content-start-record-screen");
          break;
        default:
          console.log("执行默认逻辑");
      }
    },
    mouseEnterItem(item) {
      this.hoverItem = item;
    },
    mouseLeaveItem(item) {
      this.hoverItem = null;
    },
    triggerFunction(item) {
      this.handleDistribution(item);
    },
    async saveUrlShortcut() {
      sendMessageToContent("content-saveUrl");
    },
    captureEntireShortcut() {
      // 弹出屏幕选择对话框
      // const url= await chrome.desktopCapture.chooseDesktopMedia(['screen', 'window', 'tab']);
      // console.log(url)
      // 获取当前选项卡屏幕截图
    }
  },
  created() {
    this.initData();
    this.$EventBus.$on("triggerFunction", this.triggerFunction);
  },
  beforeDestroy() {
    this.$EventBus.$off("triggerFunction", this.triggerFunction);
  }
};
</script>

<style lang="scss" scoped>
.popup-operate {
  width: 100%;
  min-height: 40px;

  #save-feature {
    margin-top: 16px;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;

    .save-feature {
      width: 49%;
      height: 80%;
      display: flex;
      vertical-align: middle;
      border-radius: 5px;
      box-sizing: border-box;
      background: #2c2c2c;
      cursor: pointer;
      .icon {
        margin-left: 13px;
        max-width: 32px;
        max-height: 32px;
        vertical-align: middle;
        display: inline-block;
        margin-top: 6px;
        width: 40%;
      }
      .name {
        vertical-align: middle;
        display: inline-block;
        padding-left: 10px;
        padding-top: 20px;
        width: 60%;
        height: 100%;
        text-align: left;
        font-size: 13px;
        color: #a1a6c4;
        user-select: none;
      }

      &:hover {
        .name {
          color: #f0f0ff;
        }
      }
    }
  }

  #capture-feature {
    width: 100%;
    min-height: 5px;
  }
  .capture-feature {
    margin-left: 1px;
    margin-right: 1px;
    width: calc(33.33333% - 2px) !important;
    height: 60px;
    display: inline-block;
    align-content: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 5px;
    box-sizing: border-box;
    background: #2c2c2c;
    cursor: pointer;
    position: relative;
    margin-bottom: 13px;
    .icon {
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translateX(-50%);

      img {
        max-width: 32px;
        max-height: 32px;
      }
    }
    .name {
      position: absolute;
      bottom: 5px;
      width: 100%;
      color: #a1a6c4;
      text-align: center;
      display: inline-block;
      font-size: 12px;
    }

    &:hover {
      .name {
        color: #f0f0ff;
      }
    }
  }

  .drag-content {
    width: 100%;

    .drag-item {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      .switch {
        margin-right: 10px;
      }
      ::v-deep .el-switch.is-checked .el-switch__core:after {
        margin-left: -14px;
      }

      ::v-deep .el-switch__core {
        height: 16px;

        &:after {
          width: 12px;
          height: 12px;
        }
      }

      .label {
        font-size: 12px;
        color: #a1a6c4;
      }
    }
  }
}
</style>